<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: cwyy
 * @Date: 2023-07-21 14:41:45
 * @LastEditTime: 2023-07-24 10:25:41
-->
<template>
  <div ref="listDom" class="item" :class="{ spreadSty: isSpread }">
    <div class="btn" v-if="showBtn" @click="isSpread = !isSpread">
      {{ isSpread ? "收起∧" : "展开∨" }}
    </div>
    <div class="desc">
        <a-typography-text strong>Abstract:&nbsp;</a-typography-text>
        {{ listData }}</div>
  </div>
</template>
<script>
export default {
  name: "ListItem",
  props: {
    listData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      showBtn: false,  //是否显示【展开/收起】按钮
      isSpread: false, 
    };
  },

  watch: {
    "listData": {
      immediate: true,
      handler() {
      //判断是否显示【展开/收起】按钮
        this.$nextTick(() => {
          const { clientHeight, scrollHeight } = this.$refs.listDom;
          this.showBtn = scrollHeight > clientHeight;
        });
      },
    },
  },
};
</script>
<style scoped lang="scss">
.item {
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 2.2em;
  .desc {
    word-break: break-all;  /*英文换行*/
    color: rgba(0, 0, 0, 0.85);
  }
  /*重点1 使用伪元素进行浮动*/
  &::before {
    content: "";
    float: right;
    /*动态高度，使用负margin, 性能比calc 好一点*/
    height: 100%;
    margin-top: -20px;
    /*height: calc(100% - 20px);*/
  }
  .btn {
    position: relative;
    /*重点2 按钮设置浮动，并使用clear: both 将按钮移到文本右下角*/
    float: right;
    clear: both;
    font-size: 14px;
    height: 20px;
    line-height: 0.8em;
    padding: 0 4px;
    cursor: pointer;
    color: rgb(41, 92, 254);
    margin-left: 10px;
  }
   /*重点3  展开时的样式*/
  &.spreadSty {
    -webkit-line-clamp: 999;  /*设置一个足够大的行数就可以了*/
  }
}
</style>